{% extends 'baykeshop/user/userinfo.html' %}

{% load shop_tags %}

{% block title %} 订单详情 {% endblock %}


{% block extrastyle %}
    <!-- <style>.b-steps .steps+.step-content{padding: 0 !important;}</style> -->
{% endblock extrastyle %}
    
{% block userinfo_content %}

{% block orderinfo %}
    <div class="box is-radiusless is-marginless pt-6" id="orderStatus">
        <b-steps v-model="activeStep" :has-navigation="false">
            <b-step-item label="待付款" icon="account-key" :clickable="false"></b-step-item>
            <b-step-item label="待发货" icon="car" :clickable="false"></b-step-item>
            <b-step-item label="待收货" icon="account-plus" :clickable="false"></b-step-item>
            <b-step-item label="待评价" icon="comment-plus" :clickable="false"></b-step-item>
            <b-step-item label="已完成" icon="store" :clickable="false"></b-step-item>
        </b-steps>
    </div>
    
    <div class="box is-radiusless is-marginless">
        <h1 class=" is-size-5">订单信息</h1>
        <div class="dropdown-divider"></div>
        <ul style="line-height: 30px;">
            <li>订单编号：{{ order.order_sn }}</li>
            
            <li>订单日期：{{ order.add_date }}</li>
            
            <li>支付状态：{{ order.get_pay_status_display }}</li>

            {% if order.pay_status > 1 and order.pay_status != 6 %}
            <li>支付方式：{{ order.get_pay_method_display }}</li>
            {% endif %}

            <li>订单金额：¥{{ order.total_amount }}</li>

            <li>订单留言：{{ order.order_mark }}</li>
        </ul>
    </div>

    <div class="box is-radiusless is-marginless1">
        <h1 class=" is-size-5">收货信息</h1>
        <div class="dropdown-divider"></div>
        <ul style="line-height: 30px;">
            <li>签收人：{{ order.name }}</li>
            
            <li>手机号：{{ order.phone }}</li>
            
            <li>收货地址：{{ order.address }}</li>
        </ul>
    </div>
{% endblock %}
    <div class="box is-radiusless mb-4">
        <h1 class=" is-size-5">商品信息</h1>
        <div class="dropdown-divider"></div>
        {% for osku in order.baykeshopordersku_set.all %}
        <div class="is-flex is-justify-content-space-between">
            <div>
                <figure class=" image is-128x128">
                    <img src="{{ osku.sku.cover_pic.url }}" alt="{{ osku.title }}" srcset="">
                </figure>
            </div>
            <div class="has-background-danger1 is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1 pl-3 pr-3">
                <h1 class="has-text-weight-bold">{{ osku.title }}</h1>
                {% if osku.spec %}<p class="has-text-grey-light">{{ osku.spec }}</p>{% endif %}
            </div>
            <div class=" has-background-danger1 is-flex is-justify-content-center is-align-items-center">
                <p class=" has-text-danger-dark">¥ {{ osku.price }} x {{ osku.count }}</p>
            </div>
        </div>
        <div class=" dropdown-divider"></div>
        
        {% if not osku.is_commented %}
            {% block order_comment %}{% endblock %}
        {% endif %}

        {% endfor %}

        {% block order_actions %}
        <div class="">
            <p class="has-text-weight-bold pt-1 pb-1 has-text-right">共{% order_num order.baykeshopordersku_set.all %}件商品，总金额{{ order.total_amount }}元（含运费）</p>
            {% is_order_commented order as is_commented %}
            <div class="buttons is-justify-content-end">
                {% if order.pay_status == 1 %}
                    <a class="button is-primary is-small" href="{% url 'baykeshop:order_detail' order.order_sn %}">立即支付</a>
                {% elif order.pay_status == 3 %}
                <form action="{% url 'baykeshop:order_list' %}" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="order_sn" value="{{ order.order_sn }}">
                    <button class="button is-primary is-small" type="submit">确认收货</button>
                </form>
                {% elif order.pay_status == 4 and not is_commented %}
                <a class=" button is-primary is-small" href="{% url 'baykeshop:comments_create' order.order_sn %}">立即评价</a>
                {% endif %}
            </div>
            
        </div>
        {% endblock %}

    </div>

{% endblock %}


{% block vue %}
    <script>
        var orderStatus = new Vue({
            el: '#orderStatus',
            delimiters: ['{$', '$}'],
            data:{
                activeStep: 0,
            },
            created(){
                this.orderStatusMethod()
            },
            methods:{
                orderStatusMethod() {
                    switch (Number('{{ order.pay_status }}')) {
                        case 1:
                            this.activeStep = 0;
                            break;
                        case 2:
                            this.activeStep = 1;
                            break;
                        case 3:
                            this.activeStep = 2;
                            break;
                        case 4:
                            this.activeStep = 3;
                            break;
                        case 5:
                            this.activeStep = 4;
                            break;
                    }
                },
            }
        })
    </script>
{% endblock %}
    
    
    